<!DOCTYPE html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="../dist/skin/skin.css" id="style">
  <title>Flowplayer 7.0</title>

  <style>
    body { font-family: avenir, sans-serif; max-width: 1000px; margin: 0 auto; padding: .6em;}
    .flowplayer .fp-color { _background: #ec6c4c; fill: #ec6c4c }
    .flowplayer .is-hidden { display: none; }
    #d { margin: 1em 0 3em 2em }
    #d a { display: inline-block; color: #789; margin: .3em 1em .3em 0; text-transform: capitalize; cursor: pointer; }
    #d section { max-width: 700px; }
    #d label { margin-right: .6em; color: #789; cursor: pointer;}
    h3 { margin: 1.2em 0 .2em; }
    /* IE8
    #player { height: 300px; width: 600px; background-color: #333;}
    */
  </style>
</head>

<body>

<div id="player" class="flowplayer fp-ui-shown -fp-slim -sepia">
  <div class="fp-ratio" style="padding-top: 56.25%"></div>

  <video class="fp-engine" poster="hero.jpg"></video>

  <div class="fp-ui">

    <div class="fp-header">
      <a class="fp-icon fp-chromecast"></a>
      <a class="fp-icon fp-airplay"></a>
      <a class="fp-icon fp-share"></a>
      <a class="fp-icon fp-fullscreen"></a>
    </div>

    <!-- generic message -->
    <div class="fp-message" style="display: block">The embed code is now on your clipboard.</div>


    <!--
      Master play & pause buttons (note: pause not in here)
      Should behave the same as in YouTube (animated in/out)
      Must be inlined so that the background color can be customized
    -->

    <svg class="fp-play fp-visible" version="1.1"- xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">

      <!-- fp-color CSS class to the background element -->
      <circle class="fp-color" cx="29" cy="29" r="29"/>

      <g>
        <polygon style="fill:#ffffff;" points="44,29 22,44 22,29.273 22,14  "/>
        <path style="fill:#ffffff;" d="M22,45c-0.16,0-0.321-0.038-0.467-0.116C21.205,44.711,21,44.371,21,44V14
          c0-0.371,0.205-0.711,0.533-0.884c0.328-0.174,0.724-0.15,1.031,0.058l22,15C44.836,28.36,45,28.669,45,29s-0.164,0.64-0.437,0.826
          l-22,15C22.394,44.941,22.197,45,22,45z M23,15.893v26.215L42.225,29L23,15.893z"/>
      </g>

    </svg>

    <div class="fp-captions">
      <span>Daisy, Daisy, give me your answer do.</span><br>
      <span>I'm half crazy all for the love of you.</span>
    </div>

    <div class="fp-controls">

      <a class="fp-icon fp-playbtn"></a>

      <span class="fp-elapsed">01:03</span>

      <div class="fp-timeline fp-bar">
        <div class="fp-buffer" style="width: 65%"></div>
        <div class="fp-progress fp-color" style="width: 35%"></div>
        <div class="fp-hover"></div>
        <span class="fp-timestamp" style="left: 19%">0:45</span>

        <span class="fp-cue" style="left: 25%"></span>
        <span class="fp-cue" style="left: 39%"></span>
        <span class="fp-cue" style="left: 55%"></span>
        <span class="fp-cue" style="left: 85%"></span>
      </div>

      <span class="fp-duration">03:56</span>

      <!--
      -->
      <div class="fp-volume">
        <a class="fp-icon fp-volumebtn"></a>

        <div class="fp-volumebar fp-bar">
          <div class="fp-progress fp-color" style="width: 35%"></div>
        </div>
      </div>

      <strong class="fp-speed">1&times;</strong>
      <strong class="fp-cc">FI</strong>
      <strong class="fp-hd">HD</strong>
      <!--
      <a class="fp-icon fp-fullscreen"></a>
      -->
    </div>

    <div class="fp-menu" id="quality-menu">
      <strong>Quality</strong>
      <a>720 HD</a>
      <a class="fp-icon fp-checked fp-color">480p</a>
      <a>360p</a>
      <a>144p</a>
      <a>144p</a>
      <a>Auto</a>
    </div>

    <div class="fp-menu -fp-active fp-embed-menu">
      <strong>Share</strong>
      <a class="fp-icon fp-twitter">Twitter</a>
      <a class="fp-icon fp-facebook">Facebook</a>
      <a class="fp-icon fp-email">Email</a>
      <a class="fp-icon fp-embed">Embed</a>
    </div>

  </div>
</div>


<div id="d">

  <h3>Controlbar background</h3>
  <label><input type="radio" name="bg" value="transparent" checked>Transparent</label>
  <label><input type="radio" name="bg" value="#016682">Brand color</label>
  <label><input type="radio" name="bg" value="rgba(0,0,0,.5)">Black</label>

  <h3>Layout</h3>
  <section id="layout-options"></section>

  <h3>Hide &amp; show</h3>
  <section id="visibility-toggles"></section>

  <h3>Options</h3>
  <!--
  <label>
    <input id="iconset" type="checkbox" name="fp-edgy">
    Outlined iconset (TBD)
  </label>
  -->
  <label>
    <input id="light" type="checkbox">
    Light video preview
  </label>

  <label>
    <input id="rounding" type="checkbox" name="fp-edgy">
    Edgy (no rounding)
  </label>



</div>

<script src="miniquery.js"></script>
<script src="designer.js"></script>
<!--
-->
</body>

